<template>
    <div>
      <h1>机构列表</h1>
      机构名称:<input type="text" v-model="info.PensionName">
      特色服务: <select v-model="info.ServeName">
                        <option value="">请选择</option>
                        <option v-for="item in xlk" :value="item.ServeName">{{item.ServeName}}</option>
                    </select>
      <input type="button" value="查询" class="btn btn-primary" @click="show">
      <input type="button" value="批量删除" class="btn btn-danger" @click="deleall">
      <input type="button" value="待发布" class="btn btn-info" @click="upstateall(1)">
      <input type="button" value="已发布" class="btn btn-success" @click="upstateall(0)">
      <input type="button" value="新增" class="btn btn-primary" @click="AddPension">
      <table class="table table-bordered">
        <tbody>
            <tr class="bg-primary">
                <td>
                    <input type="checkbox" v-model="checked" @click="checkall">
                </td>
                <td>编号</td>
                <td>机构名称</td>
                <td>特色服务</td>
                <td>图片</td>
                <td>地址</td>
                <td>电话</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list":key="item.PId">
                <td>
                    <input type="checkbox" v-model="ids" :value="item.PId" @change="checkone">
                </td>
                <td>{{item.PId}}</td>
                <td>{{item.PensionName}}</td>
                <td>{{item.ServeName}}</td>
                <td><a :href="item.Photo">查看</a></td>
                <td>{{item.Addres}}</td>
                <td>{{item.Phone}}</td>
                <td>{{item.State==1?'待发布':'已发布'}}</td>
                <td>
                    <input type="button" value="删除" class="btn btn-danger" @click="dele(item.PId)">
                    <input type="button" value="修改" class="btn btn-success" @click="Update(item.PId)">
                    <input type="button" value="待发布" class="btn btn-info" v-if="item.State==0" @click="upstate(item.PId,1)">
                    <input type="button" value="已发布" class="btn btn-info" v-if="item.State==1" @click="upstate(item.PId,0)">
                </td>
            </tr>
        </tbody>
      </table>
      <span>共<b>{{data.totalCount}}</b>条</span>
      <span>每页<b>{{info.pagesize}}</b>条</span>
      <span>共<b>{{info.pageindex}}/{{data.totalPage}}</b>页</span>

      <input type="button" value="首页" @click="Fenpage(1)">
      <input type="button" value="上一页" @click="Fenpage(info.pageindex-1)">
      <span v-for="item in data.totalPage" @click="Fenpage(item)">{{item}}</span>
      <input type="button" value="下一页" @click="Fenpage(info.pageindex+1)">
      <input type="button" value="尾页" @click="Fenpage(data.totalPage)">

      <input type="number" v-model="info.pageindex">
      <input type="button" value="跳转" @click="Fenpage(info.pageindex)">

      <select v-model="info.pagesize" @change="show">
        <option v-for="item in arr" :value="item">每页{{item}}条</option>
      </select>

    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue';
import axios from 'axios';
import moment from 'moment';

import {useRouter,useRoute} from 'vue-router';
const router=useRouter();
const route=useRoute();

import { useStore } from '@/stores/user';
const a=useStore();


let info:any=reactive({
    pageindex:1,
    pagesize:2,
    PensionName:'',
    ServeName:'',
})
let data:any=reactive({
    totalCount:0,
    totalPage:0,
    list:[],
})

onMounted(()=>{
    getpension();
})
//新增按钮
const AddPension=()=>{
    router.push('/pensionadd');
}
//===========服务下拉框==========
let xlk:any=ref([]);

onMounted(()=>{
    serve();
})

const serve=()=>{
    axios({
        url:'/api/Pension/Getservelist',
        method:'get',
        params:xlk,
    })
    .then(res=>{
        console.log(res);
        xlk.value=res.data;
    })
}
//===========全选/反选===========
let checked:any=ref(false);
let ids:any=ref([]);
//全选
const checkall=()=>{
    checked.value=!checked.value;
    if(checked.value==true){
        ids.value=data.list.map((item:any)=>{
            return item.PId;
        })
    }
    else{
        ids.value=[];
    }
}
//反选
const checkone=()=>{
    if(ids.value.length==data.list.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}
//==========分页===========
const Fenpage=(num:any)=>{
     if(num>=1 && num <=data.totalPage){
        info.pageindex=num;
        getpension();
     }
     else{
        alert('超出页码范围');
        return;
     }
}
let arr:any=ref([2,3,4,5,6]);
const show=()=>{
    info.pageindex=1;
    getpension();
}
//===========列表============
const getpension=()=>{
    axios({
        url:'https://localhost:7254/api/Pension/GetPensions',
        method:'get',
        params:info,
    })
    .then(res=>{
        console.log(res);
        Object.assign(data,res.data);
    })
}
//==============单个删除===============
const dele=(id:any)=>{
    if(confirm('确认删除吗')){
        axios({
            url:'https://localhost:7254/api/Pension/DelPension',
            method:'delete',
            params:{
                ids:id
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                getpension();
            }
            else{
                alert('删除失败');
            }
        })
    }
}
//===============批量删除==============
const deleall=()=>{
    if(confirm('确认删除吗')){
        axios({
            url:'https://localhost:7254/api/Pension/DelPension',
            method:'delete',
            params:{
                ids:ids.value.toString(),
                
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                checked.value=false;
                getpension();
            }
            else{
                alert('删除失败');
            }
        })
    }
}
//================单个修改状态==================
const upstate=(id:any,state:any)=>{
      if(confirm('确认修改吗')){
        axios({
            url:'https://localhost:7254/api/Pension/UpdateState',
            method:'put',
            params:{
                ids:id,
                state:state
            },
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('修改成功');
                getpension();
            }
            else{
                alert('修改失败');
            }
        })
      }
}
//===================批量修改状态==========================
const upstateall=(state:any)=>{
      if(confirm('确认修改吗')){
        axios({
            url:'https://localhost:7254/api/Pension/UpdateState',
            method:'put',
            params:{
                ids:ids.value.toString(),
                state:state
            },
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('修改成功');
                getpension();
            }
            else{
                alert('修改失败');
            }
        })
      }
}
//================修改跳转============
const Update=(id:any)=>{
    router.push({
        path:'/PensionUpdate',
        query:{
            id:id
        }
    })
}


</script>

<style scoped>
b{
    color: red;
}
span{
    margin: 0 10px;
}
input{
    margin: 0 10px;
}
</style>